<template>
 <yh-dialog drag title=" " :close-on-click-modal="false" :before-close="closeDialog" :visible.sync="bankCodeDialog" width="600px">
    <div>
      <el-form label-width="100px" :model="queryForm" ref="queryBankForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="银行代码:" prop="bankCode">
              <el-input v-model="queryForm.bankCode" placeholder="" clearable size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行名称:" prop="bankName">
              <el-input v-model="queryForm.bankName" placeholder="" clearable size="mini"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 5px">
          <el-col :span="12">
            <el-form-item label="银行分类:" prop="bankType1">
              <el-select v-model="queryForm.bankType1" placeholder="" :disabled="disabled" size="mini" filterable>
                <el-option v-for="(sLabel, sKey) in bankTypePojo" :label="`${sKey} ${sLabel}`" :value="sKey" :key="sKey" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="来源类型" prop="sourceType">
              <el-select v-model="queryForm.sourceType" placeholder="" :disabled="disabled" size="mini" filterable>
                <el-option v-for="(mLabel, mKey) in sourceTypePojo" :label="`${mKey} ${mLabel}`" :value="mKey" :key="mKey" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div style="margin-top: 5px; text-align: right">
        <el-button size="mini" @click="resetForm">重 置</el-button>
        <el-button size="mini" type="primary" @click="getBankList(1)">搜 索</el-button>
      </div>
      <el-table
        :data="bankTable"
        v-table-top="pageVO.currentPage"
        @row-dblclick="bankSearchSubmit"
        v-loading="bankSearchLoading"
        style="width: 100%"
        height="250px"
        size="mini"
        border
      >
        <el-table-column prop="bankCode" label="银行代码" width="120" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="bankName" label="银行名称" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="bankType1" label="银行分类1" width="120" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ bankTypePojo[scope.row.bankType1] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sourceType" label="来源类型" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ sourceTypePojo[scope.row.sourceType] }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @current-change="getBankList"
          layout="total, prev, pager, next"
          :current-page="pageVO.currentPage"
          :page-size="pageVO.pageSize"
          :total="pageVO.total"
        >
        </el-pagination>
      </div>
    </div>
 </yh-dialog>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import DictionConstUtil, { objToArr } from '@/utils/diction-const-util';

export interface pages {
  total?: number;
  pageSize?: number;
  currentPage?: number;
}
@Component({
  name: 'SearchBank',
})
export default class SearchBank extends Vue {
  @Prop()
  bankCodeDialog: boolean;
  bankTable: any[] = [];

  @Prop()
  queryBankForm: any;

  // 证券查询表单
  queryForm: any = {};

  private pageVO: pages = {
    total: 0,
    pageSize: 25,
    currentPage: 1,
  };

  private bankSearchLoading = false;
  private DictionConstUtil = DictionConstUtil;

  private bankTypePojo: any = {};
  private sourceTypePojo: any = {};

  mounted() {
    this.$set(this, 'bankTypePojo', DictionConstUtil.BankType);
    this.$set(this, 'sourceTypePojo', DictionConstUtil.SourceType);
  }

  @Watch('queryBankForm', { immediate: true, deep: true })
  private async getBank() {
    this.queryForm = JSON.parse(JSON.stringify(this.queryBankForm));
    this.getBankList(this.pageVO.currentPage);
  }

  // 重置表单
  private resetForm() {
    (this.$refs.queryBankForm as any).resetFields();
  }

  // 表格列双击事件
  private bankSearchSubmit(row) {
    this.closeDialog();
    this.$emit('getBank', row);
  }

  // 关闭对话框
  private closeDialog() {
    this.$emit('closeBankDialog');
  }

  // 获取证券代码
  private getBankList(val: number) {
    this.$axios
      .post('/baseInfomation/bank/list', {
        ...this.queryForm,
        paging: {
          currentPage: val,
          pageSize: 25,
        },
      })
      .then((res: any) => {
        this.bankTable = res.list;
        this.pageVO.total = res.total;
      });
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-dialog .el-dialog__body {
  max-height: 70vh;
}
/deep/ .el-form-item {
  margin-bottom: 5px !important;
}
</style>
